<script setup name="IntelligentIntegration">
// import IntelligentIntegration1 from "./modules/IntelligentIntegration1.vue"
// import IntelligentIntegration2 from "./modules/IntelligentIntegration2.vue"
import IntelligentIntegration3 from './modules/IntelligentIntegration3.vue'
import IntelligentIntegration4 from './modules/IntelligentIntegration4.vue'
// import IntelligentIntegration5 from "./modules/IntelligentIntegration5.vue"

const selectedIndex = ref(0)
const items = ref([
  // { label: "经营驾驶舱" },
  { label: 'MES' },
  // { label: "智慧能耗" },
  { label: '设备管理' }
  // { label: "ERP" }
])
const timer = ref(null)
const handleItemClick = index => {
  selectedIndex.value = index
  openTimer() // 清空定时器
}

const openTimer = () => {
  clearInterval(timer.value)

  timer.value = setInterval(() => {
    selectedIndex.value += 1
    if (selectedIndex.value >= items.value.length) {
      selectedIndex.value = 0
    }
  }, 1000 * 60 * 2)
}

onMounted(openTimer)

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<template>
  <div class="ps_board IntelligentIntegration">
    <div class="dom1">
      <ps-chart-header></ps-chart-header>
    </div>
    <div class="dom2">
      <ps-circle-menus :items="items" @update:selectedIndex="handleItemClick" :selectedIndex="selectedIndex" />
    </div>
    <div class="dom3">
      <!-- <template v-if="selectedIndex === 0">
                <IntelligentIntegration5></IntelligentIntegration5>
            </template> -->
      <!-- <template v-if="selectedIndex === 2">
                <IntelligentIntegration1></IntelligentIntegration1>
            </template> -->
      <!-- <template v-if="selectedIndex === 4">
                <IntelligentIntegration2></IntelligentIntegration2>
            </template> -->
      <IntelligentIntegration3 v-if="selectedIndex === 0" />
        <IntelligentIntegration4 v-else-if="selectedIndex === 1" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.IntelligentIntegration {
  display: grid;
  grid-template-rows: 60px 60px auto;
  gap: 10px;

  .dom3 {
    width: 100%;
    min-height: 0;
    display: flex;
    justify-content: center;
  }
}

:deep(.notification-content) {
  position: absolute;
  bottom: -35px;
}

:deep(.el-segmented) {
  border: 1px solid #275a82;
  background-color: rgba($color: #000000, $alpha: 0);

  .el-segmented-item {
    background-color: rgba($color: #000000, $alpha: 0);
  }
  .el-segmented__item:not(.is-disabled):not(.is-selected):hover {
    color: #fff;
    background-color: #052554;
  }
}
</style>
